<template>
  <div class="user">
    <!-- 头部 -->
    <div class="head_user">
      <div class="head_user_info">
        <img class="head_user_info_avatar" :src="avatarUrl" />
        <div class="head_user_info_name">
          <span>{{ userinfo.nickname }}</span>
          <span @click="goEditInformation">完善资料让我更懂你</span>
        </div>
        <div class="head_user_info_sign">
          <img
            src=""
          />
          <span>每日签到</span>
        </div>
      </div>
      <div class="head_usert_menu">
        <div class="head_usert_menu_row">
          <span>12</span><span>我的收藏</span>
        </div>
        <div class="head_usert_menu_row">
          <span>12</span><span>浏览记录</span>
        </div>
        <div class="head_usert_menu_row">
          <span>￥0</span><span>我的红包</span>
        </div>
        <div class="head_usert_menu_row">
          <span>12</span><span>优惠券</span>
        </div>
      </div>
      <div class="head_user_order">
        <div class="head_user_order_top">
          <span>我的订单</span>
          <span @click="goOrderList">
            全部订单
            <Icon name="youjiantou" size="12px" />
          </span>
        </div>
        <div class="head_user_order_bottom">
          <div
            class="head_user_order_bottom_row"
            v-for="item in head_user_order_bottomData"
            :key="item.name"
            @click="goOrderList"
          >
            <img :src="item.img" /><span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="resDetail">
      <div class="resDetail-item" @click="goAddressList">
        <label for="" class="resDetail_title"
          ><img
            src=""
          />
          地址管理
        </label>
        <Icon name="youjiantou" class="custom-icon" />
      </div>
      <div class="resDetail-item">
        <label for="" class="resDetail_title"
          ><img
            src=""
          />
          我的钱包
        </label>
        <Icon name="youjiantou" class="custom-icon" />
      </div>
      <div class="resDetail-item">
        <label for="" class="resDetail_title"
          ><img
            src=""
          />
          我的二维码
        </label>
        <Icon name="youjiantou" class="custom-icon" />
      </div>
      <div class="resDetail-item">
        <label for="" class="resDetail_title"
          ><img
            src=""
          />
          我的小伙伴
        </label>
        <Icon name="youjiantou" class="custom-icon" />
      </div>
      <div class="resDetail-item">
        <label for="" class="resDetail_title"
          ><img
            src=""
          />
          0元试用
        </label>
        <Icon name="youjiantou" class="custom-icon" />
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/common/Icon/index.vue';
export default {
  components: {
    Icon,
  },
  data() {
    return {
      userinfo: JSON.parse(localStorage.getItem('userinfo')) || {},
      head_user_order_bottomData: [
        {
          name: '待付款',
          img: '',
        },
        {
          name: '待发货',
          img: '',
        },
        {
          name: '待确认',
          img: '',
        },
        {
          name: '售后/退款',
          img: '',
        },
      ],
    };
  },
  methods: {
    // 跳转到编辑个人信息页面
    goEditInformation() {
      this.$router.push({
        name: 'EditInformation',
      });
    },
    // 跳转到订单列表页面
    goOrderList() {
      this.$router.push({
        name: 'orderlist',
      });
    },
    goAddressList() {
      this.$router.push({
        name: 'addressList',
      });
    },
  },
  computed: {
    // 头像
    avatarUrl() {
      const baseUrl = 'http://43.138.15.137:4000/';
      return this.userinfo.avatarurl.includes(baseUrl)
        ? this.userinfo.avatarurl
        : baseUrl + this.userinfo.avatarurl;
    },
  },
};
</script>

<style lang="scss">
.user {
  background-color: #f2f2f2;
  height: 100vh;
  overflow: hidden;

  .head_user {
    width: 100%;
    height: 210px;
    background: linear-gradient(#ff6040, #ff8a80);
    overflow: hidden;

    .head_user_info {
      height: 64px;
      width: 100%;
      margin-top: 10px;
      position: relative;
      display: flex;
      align-items: center;
      .head_user_info_avatar {
        object-fit: cover;
      }

      img {
        width: 64px;
        height: 64px;
        margin-left: 10px;
        border-radius: 100%;
      }

      .head_user_info_name {
        position: absolute;
        left: 70px;
        height: 44px;
        width: 98px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        span:nth-child(1) {
          font-size: 18px;
          color: #ffffff;
        }

        span:nth-child(2) {
          font-size: 10px;
          color: #ffffff;
          width: 104px;
          line-height: 16px;
          text-align: center;
          border: 1px solid #ffffff;
          border-radius: 1.5px;
        }
      }

      .head_user_info_sign {
        width: 76px;
        height: 20px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        background-color: #ffd4cc;
        position: absolute;
        top: 22px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
          width: 16px;
          height: 16px;
          margin-left: 10px;
          border-radius: 100%;
        }

        span {
          color: #ff6243;
          font-size: 10px;
        }
      }
    }

    .head_usert_menu {
      height: 64px;
      width: 100%;
      margin-top: 10px;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .head_usert_menu_row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;

        span:nth-child(2) {
          font-size: 10px;
        }
      }
    }

    .head_user_order {
      width: 94%;
      height: 100px;
      background-color: white;
      border-radius: 2.5px;
      position: absolute;
      left: 3%;
      top: 150px;

      .head_user_order_top {
        width: 94%;
        height: 15px;
        margin: 10px 10px 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
        }

        span:nth-child(2) {
          font-size: 12px;
          color: #ff6040;
        }
      }

      .head_user_order_bottom {
        width: 335px;
        height: 52px;
        margin: 10px 10px 0 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .head_user_order_bottom_row {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 10px;

          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }

  .resDetail {
    width: 100%;
    background: #ffffff;
    padding: 0 10px 10px 10px;
    margin-top: 55px;
    overflow: hidden;

    .resDetail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-top: 20px;

      .resDetail_title {
        font-size: 12px;
        font-weight: 600;

        img {
          width: 16px;
          height: 16px;
          margin-right: 7px;
        }
      }

      .custom-icon {
        margin-right: 10px;
      }
    }
  }
}
</style>
